<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>page3</title>
    <!-- 引入 echarts.js -->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
    </script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:600px;">
    test
</div>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    myChart.showLoading();
    $.get('cd.json', function (geoJson) {

        myChart.hideLoading();

        echarts.registerMap('CD', geoJson);

        myChart.setOption(option = {
            title: {
                text: '成都18区人口密度 （2021）',
                subtext: '人口密度数据来自Wikipedia',
                //sublink: 'http://zh.wikipedia.org/wiki/%E9%A6%99%E6%B8%AF%E8%A1%8C%E6%94%BF%E5%8D%80%E5%8A%83#cite_note-12'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}<br/>{c} (p / km2)'
            },
            toolbox: {
                show: true,
                orient: 'vertical',
                left: 'right',
                top: 'center',
                feature: {
                    dataView: {readOnly: false},
                    restore: {},
                    saveAsImage: {}
                }
            },
            visualMap: {
                min: 20,
                max: 250,
                text: ['High', 'Low'],
                realtime: false,
                calculable: true,
                inRange: {
                    color: ['lightskyblue', 'yellow', 'orangered']
                }
            },
            series: [
                {
                    name: '成都11区人口密度',
                    type: 'map',
                    mapType: 'CD', // 自定义扩展图表类型
                    label: {
                        show: true
                    },
                    data: [
                        {name: '武侯区', value: 153.6},
                    {name: '锦江区', value: 103.6},
                    {name: '青羊区', value: 102.7},
                    {name: '金牛区', value: 136.3},
                    {name: '成华区', value: 94.8},
                    {name: '龙泉驿区', value: 141.3},
                    {name: '温江区', value: 95.5},
                    {name: '新都区', value: 145.2},
                    {name: '青白江区', value:37},
                    {name: '双流区', value: 244.38},
                    {name: '都江堰市', value: 68},
                    {name: '彭州市', value: 77.1},
                    {name: '金堂县', value: 89.9},
                    {name: '简阳市', value: 104},
                    {name: '成都天府新区', value: 70.2},
                    {name: '崇州市', value: 67},
                    {name: '大邑县', value: 51.3},
                    {name: '新津县', value: 31.5},
                    {name: '蒲江县', value: 25.3},
                    {name: '邛崃市', value: 61.7},
                    {name: '郫都区', value: 140.5}
                    ],
                    // 自定义名称映射
                    // nameMap: {
                    //     'Central and Western': '中西区',
                    //     'Eastern': '东区',
                    //     'Islands': '离岛',
                    //     'Kowloon City': '九龙城',
                    //     'Kwai Tsing': '葵青',
                    //     'Kwun Tong': '观塘',
                    //     'North': '北区',
                    //     'Sai Kung': '西贡',
                    //     'Sha Tin': '沙田',
                    //     'Sham Shui Po': '深水埗',
                    //     'Southern': '南区',
                    //     'Tai Po': '大埔',
                    //     'Tsuen Wan': '荃湾',
                    //     'Tuen Mun': '屯门',
                    //     'Wan Chai': '湾仔',
                    //     'Wong Tai Sin': '黄大仙',
                    //     'Yau Tsim Mong': '油尖旺',
                    //     'Yuen Long': '元朗'
                    // }
                }
            ]
        });
    });

</script>
</body>
</html>